<template>
  <ZContainer v-loading="resourceLoading"
              class="bot-grid">
    <slot name="toolbar"
          v-if="$slots.toolbar">
    </slot>

    <BGrid :columns="columns"
           :dataSource="resources"
           :allowGrouping="true"
           :showColumnMenu="true"
           :allowResizing="true"
           :showColumnChooser="true"
           :allowTextWrap="true"
           :allowFiltering="true"
           :filterSettings="{
              type: 'Excel'
            }"
           :toolbar="['Search','ColumnChooser']"
           :selectionSettings="{
              type: 'Multiple'
            }"
           :allowSorting="true"
           :allowReordering="true"
           :groupSettings="{}"
           :sortSettings="{
            columns: [
          { field: 'name', direction: 'Ascending' },
          { field: 'updateTime', direction: 'Ascending' }
        ]
         }"
           :rowSelected="rowSelected"
           :load="load"
           class="h-0"
           ref="b-grid" />

  </ZContainer>

</template>

<script>
import BGrid from '@/components/storybook/b-grid'
import { renderColumns } from '../index.schema'
import ZContainer from '@/components/storybook/z-container'
import { destoryDeep } from '@/components/storybook/utilties/destory'
import { isFunction } from 'lodash'
import { fetcBotGrid } from '@/api/new'

export default {
  name: 'BotGrid',
  components: {
    BGrid,
    ZContainer
  },
  props: {
    searchForm: {
      type: Object,
      default: () => ({})
    },
    formatResoure: Function
  },
  data () {
    return {
      resourceLoading: false,
      resources: []
    }
  },
  created () {
    this.init()
  },

  computed: {
    columns () {
      return renderColumns()
    }
  },

  methods: {
    rowSelected () {
      if (this.$refs['b-grid']) {
      }
    },
    load () {

    },
    async init () {
      try {
        this.resourceLoading = true
        const [resources] = await Promise.all([this.getTableData()])
     
        this.resources =  resources.records || []
      } catch (error) {

      } finally {
        this.resourceLoading = false
        this.$store.state.REFRESHCACHE = false
      }
    },
    async getTableData (refresh) {
      const { order, filter, integration, pagination, name, orderField, ...restSearch } = this.searchForm
      const { showAllIntegration = false } = integration || {}
      const { type } = filter || {}

      const params = {
        showAllIntegration,
        current: 1,
        size: 999999,
        businessType: (type || []).join(),
        ...restSearch,
        queryType: refresh || this.$store.state.REFRESHCACHE ? 'REFRESHCACHE' : null
      }
      const { data: response } = await fetcBotGrid(params)
      if (response.code !== 0) {
        throw response.msg
      }

      const { records, ...rest } = response.data || {}
      if (isFunction(this.formatResoure)) {
        return {
          ...rest,
          records: records.map(item => this.formatResoure(item))
        }
      }

      return response.data || {}
    },
    async refreshTable (refresh) {
      try {
        this.resourceLoading = true
        destoryDeep(this.$refs['b-grid'].getInstance())

        const resources = await this.getTableData(refresh)
     
        this.resources = resources.records || []
      } catch (error) {

      } finally {
        this.resourceLoading = false
      }
    }
  }

}
</script>
